<!-- 添加迭代页面 -->
<template>
  <div>
    <div class="person-info">
      <div class="taskForm">
        <div>
          <select-down :columns="taskTypeList" :value="iteration.taskType" :label-name="'工单类型'" @changeValue="changeValue" />
        </div>
        <div>
          <select-down :columns="ownExecutionList" :value="iteration.ownExecution" :label-name="'所属项目'" @changeValue="changeValue" />
        </div>
        <div>
          <select-down :columns="ownModuleList" :value="iteration.ownModule" :label-name="'项目状态'" @changeValue="changeValue" />
        </div>
        <div>
          <van-field v-model="iteration.startTime" label="开始时间" placeholder-style="color:#999;" readonly is-link input-align="right" placeholder="请选择" clickable @click-input="clickStartTime" />
          <van-popup :show="showStartTime" position="bottom">
            <van-datetime-picker type="date" :value="currentDate" :min-date="minDate" :basic-formatter="basicFormatter" @confirm="onStartTime" @cancel="onCancelStartTime" />
          </van-popup>
        </div>
        <div>
          <van-field v-model="iteration.endTime" label="结束时间" placeholder-style="color:#999;" readonly is-link input-align="right" placeholder="请选择" clickable @click-input="clickEndTime" />
          <van-popup :show="showEndTime" position="bottom">
            <van-datetime-picker type="date" :value="currentDates" :min-date="minDate" :basic-formatter="basicFormatter" @confirm="onEndTime" @cancel="onCancelEndTime" />
          </van-popup>
        </div>
        <div class="taskSty moreStyle">
          <div>项目描述</div>
          <div>
            <van-field v-model="iteration.taskDescript" label="自我评价" class="evaluate" placeholder-style="color:#999;" autosize type="textarea" placeholder="请输入" @change="iteration.taskDescript = $event.detail" />
          </div>
        </div>
      </div>
      <div class="infoBtn">
        <van-button size="large" :class="showSubmit?'submit':'noSubmit'" round @click="submitPerson">
          提交
        </van-button>
      </div>
    </div>
    <van-toast id="van-toast" />
  </div>
</template>
<script>
import selectDown from '@/pages/me/select-down.vue'
import Toast from '@/wxcomponents/vant/toast/toast'
import zeUpload from '@/components/ze-oa-form/ze-upload.vue'
export default {
  components: { selectDown, zeUpload },
  data() {
    return {
      iteration: {
        ownExecution: '',
        taskType: '',
        ownModule: '',
        taskDescript: '',
        startTime: '',
        endTime: '',
      },
      showStartTime: false,
      showEndTime: false,
      showSubmit: false,
      // 所属项目list
      ownExecutionList: ['市政信息升级管理平台', '五图河App'],
      // 工单类型
      taskTypeList: ['类型一', '类型二'],
      // 项目状态list
      ownModuleList: ['已通过', '未通过'],
      currentDate: new Date().getTime(),
      currentDates: new Date().getTime(),
      minDate: new Date(1970, 1, 1).getTime(),
    }
  },
  onLoad() { },
  methods: {
    // 处理控件显示的时间格式
    basicFormatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      } else if (type === 'day') {
        return `${value}日`
      }
      return value
    },
    // 选择值
    changeValue(val) {
      switch (val.name) {
        case '所属项目':
          this.iteration.ownExecution = val.value
          break
        case '工单类型':
          this.showSubmit = true
          this.iteration.taskType = val.value
          break
        case '项目状态':
          this.iteration.ownModule = val.value
          break
      }
    },
    // 返回上一页
    onClickLeft() {
      uni.navigateBack()
    },
    // 点击开始时间框
    clickStartTime() {
      this.showStartTime = true
    },
    // 取值开始时间
    onStartTime(val) {
      const date = new Date(val.detail)
      const Year = date.getFullYear()
      const Moth = (date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1)
      const Day = (date.getDate() < 10 ? `0${date.getDate()}` : date.getDate())
      const GMT = `${Year}-${Moth}-${Day}`
      this.iteration.startTime = GMT
      this.showStartTime = false
    },
    // 取消开始时间
    onCancelStartTime() {
      this.showStartTime = false
    },
    // 点击完成时间框
    clickEndTime() {
      this.showEndTime = true
    },
    // 取值完成时间
    onEndTime(val) {
      const date = new Date(val.detail)
      const Year = date.getFullYear()
      const Moth = (date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1)
      const Day = (date.getDate() < 10 ? `0${date.getDate()}` : date.getDate())
      const GMT = `${Year}-${Moth}-${Day}`
      this.iteration.endTime = GMT
      this.showEndTime = false
    },
    // 取消完成时间
    onCancelEndTime() {
      this.showEndTime = false
    },
    submitPerson() {
      if (this.iteration.ownExecution === undefined || this.iteration.ownExecution.trim().length === 0) {
        Toast('请选择所属项目')
        return
      }
      if (this.iteration.taskType === undefined || this.iteration.taskType.trim().length === 0) {
        Toast('请选择工单类型')
      }
      // uni.setStorageSync('person', this.iteration)
      // uni.navigateTo({
      //   url: '/package-guest/pages/info-regist/info-write/index',
      // })
    },
  },
}
</script>
  <style lang="scss" scoped>
  .person-info{
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      margin-top: 10px;
      .taskForm{
          width: 93%;
          margin: 0 auto;
          box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.06);
          border-radius: 2px;
      }
      .infoBtn{
          text-align: center;
          padding-top: 15%;
          padding-bottom: 10%;
          width: 80%;
      }
      .headSty{
          display: flex;
          justify-content: space-between;
          margin: 0 auto;
          padding: 0px 5px 0px 18px;
          .head-img{
              align-items: center;
              display: flex;
              img:nth-child(1){
                  width:28px;
                  height:28px;
              }
              img:nth-child(2){
                  width:16px;
                  height:16px;
              }
          }
      }
      .taskSty{
          padding: 10px 0px 0px 16px;
      }
  }
  </style>
  <style lang="scss">
  .good-picture{
      padding-left: 16px;
      padding-right: 6px;
  }
  .evaluate{
      view .van-cell__title{
          display: none !important;
      }
      view .van-cell__value{
          height: 100px;
          background: #F9F8F8;
      }
      view .van-field__body--textarea{
          height:100%;
      }
  }
  .moreStyle{
      view {
          label{
              width:100%;
              display: flex;
              white-space: nowrap;
          }
          input{
              padding-right: 3px;
              text-align: right;
          }
          textarea{
              height:100% !important;
              padding-left: 8px;
              padding-top: 4px;
          }
      }
      .van-field__body{
          padding-right: 16px;
      }
  }
  .taskForm{
      .van-cell{
          padding: 10px 5px 10px 2px !important;
      }
      .van-cell__title{
          min-width:8em !important;
          max-width:8em !important;
          padding-left:16px;
      }
      .van-field__control{
          color:#999 !important;
          font-size: 12px;
      }
      .van-icon:before{
          color:#999;
      }
      .van-field__label{
          color:#333 !important;
          white-space: normal !important;
      }
  }
  .infoBtn{
      .noSubmit{
          .van-button--round {
              height: 36px;
              width: 75%;
              background: #ccc !important;
              color: #fff !important;
              font-size: 16px !important;
          }
      }
      .submit{
          .van-button--round {
              height: 36px;
              width: 75%;
              background: #029b00!important;
              color: #fff !important;
              font-size: 16px !important;
          }
      }
  }
  </style>
